<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			canvas{
				background: #272822;
				position: relative;
			}
			img{
				width: 300px;
				height: 200px;
			}
		</style>
	</head>
	<body>
		<img src="../../img/lu1.png" alt="" id='dog'/>
		<br />
		<canvas id='canvas' width='1000' height='600'></canvas>
		<script>
			//获得画板
			var canvas=document.getElementById('canvas');
			//获得绘画环境
			var cv=canvas.getContext('2d');
			
			var dog=document.getElementById("dog");
			//等dog图片加载完毕之后
			dog.onload=function(){
				//将图像写入到画板中
				//这种写法：
				//第一个参数指定图像资源，第二个和第三个指定图像在画板中的位置
				//cv.drawImage(dog,100,50);
				
				//这种写法：
				//第一个参数指定图像资源，第二个和第三个指定图像在画板中的位置
				//第四个和第五个参数是指定图像在面板中的大小
//				cv.drawImage(dog,100,50,300,200);
				
				//这种写法：
				//第一个参数指定图像资源，第二个和第三个指定图像在画板中截取的位置
				//第四个和第五个参数是指定图像上裁切多大的区域
				//第六个第七个参数用来指定裁切出来的图像的位置
				//第八个第九个参数用来指定裁切出来的图像的大小
				cv.drawImage(dog,10,10,200,200,150,150,300,200);
			}
			
		</script>
	</body>
</html>
